<script setup>
import {
	onMounted,
	ref,
	getCurrentInstance,
	reactive,
	onBeforeUnmount,
} from 'vue';

let router = ref()
var echart = ref()
const tableData = [
  {
    name: 'XXXXX设备',
	time: '09：20',
    status: '关机',
  },
  {
    name: 'XXXXX设备',
    time: '09：20',
    status: '关机',
  },
  {
    name: 'XXXXX设备',
    time: '09：20',
    status: '关机',
  },
  {
    name: 'XXXXX设备',
    time: '09：20',
    status: '关机',
  },
  {
    name: 'XXXXX设备',
    time: '09：20',
    status: '关机',
  },
  {
    name: 'XXXXX设备',
    time: '09：20',
    status: '关机',
  },
  {
    name: 'XXXXX设备',
    time: '09：20',
    status: '关机',
  },
  {
    name: 'XXXXX设备',
    time: '09：20',
    status: '关机',
  },
]

function lineChart() {
	var dom = document.getElementById('chart-container');
	let myChart = echart.value.getInstanceByDom(dom)
	if (myChart == null) {
		myChart = echart.value.init(dom, null, {
			renderer: 'canvas',
			useDirtyRect: false
		})
	}
	
	var option;
	
	option = {
	  xAxis: {
	    type: 'category',
	    boundaryGap: false,
	    data: ['08.02', '08.06', '08.10', '08.14', '08.18', '08.22', '08.26', '08.30']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  tooltip: {
	      trigger: 'axis',
	      axisPointer: {
	        type: 'cross',
	        label: {
	          backgroundColor: '#6a7985'
	        }
	      }
	    },
	  series: [
	    {
	      data: [900, 300, 1500, 600, 950, 350, 900, 600],
	      type: 'line',
		  smooth: true,
		  showSymbol:false,
		  lineStyle: {
		  	color: "#20D8CE",
			width: 1
		  },
		  itemStyle: {
		  	color: "#20D8CE"
		  },
	      areaStyle: {
			  color: {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [  // 渐变颜色
				  {
					offset: 0,
					color: '#20D8CE',
				  },
				  {
					offset: 1,
					color: '#E5F3F9 ',
				  },
				],
				global: false,
			},
	      },
	    }
	  ]
	};
	
	if (option && typeof option === 'object') {
	  myChart.setOption(option);
	}
	
	window.addEventListener('resize', myChart.resize);
}

function lineChart2() {
	var dom = document.getElementById('chart-container2');
	let myChart = echart.value.getInstanceByDom(dom)
	if (myChart == null) {
		myChart = echart.value.init(dom, null, {
			renderer: 'canvas',
			useDirtyRect: false
		})
	}
	
	var option;
	
	option = {
	  xAxis: {
	    type: 'category',
	    boundaryGap: false,
	    data: ['08.02', '08.06', '08.10', '08.14', '08.18', '08.22', '08.26', '08.30']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  tooltip: {
	      trigger: 'axis',
	      axisPointer: {
	        type: 'cross',
	        label: {
	          backgroundColor: '#6a7985'
	        }
	      }
	    },
	  series: [
	    {
	      data: [900, 300, 1500, 600, 950, 350, 900, 600],
	      type: 'line',
		  smooth: true,
		  showSymbol:false,
		  lineStyle: {
		  	color: "#20D8CE",
			width: 1
		  },
		  itemStyle: {
		  	color: "#20D8CE"
		  },
		  areaStyle: {
			  color: {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [  // 渐变颜色
				  {
					offset: 0,
					color: '#20D8CE',
				  },
				  {
					offset: 1,
					color: '#E5F3F9 ',
				  },
				],
				global: false,
			  },
		  },
	    }
	  ]
	};
	
	if (option && typeof option === 'object') {
	  myChart.setOption(option);
	}
	
	window.addEventListener('resize', myChart.resize);
}

function barChart() {
	var dom = document.getElementById('chart-container3');
	let myChart = echart.value.getInstanceByDom(dom)
	if (myChart == null) {
		myChart = echart.value.init(dom, null, {
			renderer: 'canvas',
			useDirtyRect: false
		})
	}
	
	var option;
	
	option = {
	  tooltip: {
	    trigger: 'axis',
	    axisPointer: {
	      type: 'cross',
	      crossStyle: {
	        color: '#999'
	      }
	    }
	  },
	  xAxis: [
	    {
	      type: 'category',
	      data: ['08.02', '08.06', '08.10', '08.14', '08.18', '08.22', '08.26', '08.30'],
	      axisPointer: {
	        type: 'shadow'
	      }
	    }
	  ],
	  yAxis: [
	    {
	      type: 'value',
	      name: '(小时)',
	      min: 0,
	      max: 1500,
	      // interval: 50,
	      axisLabel: {
	        formatter: '{value} h'
	      }
	    }
	  ],
	  series: [
	    {
	      name: '关机时长',
	      type: 'bar',
		  itemStyle: {
		  	color: "#FF8E2E"
		  },
		  barWidth: 20,
	      tooltip: {
	        valueFormatter: function (value) {
	          return value + ' 小时';
	        }
	      },
	      data: [
	        800, 300, 1500, 400, 600, 300, 800, 500
	      ]
	    },
	    {
	      name: 'line',
	      type: 'line',
	      smooth: true,
	      showSymbol:false,
	      data: [800, 300, 1500, 400, 600, 300, 800, 500],
		  lineStyle: {
		  	color: "#20D8CE",
		  	width: 1
		  },
	      areaStyle: {
			  color: {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [  // 渐变颜色
				  {
					offset: 0,
					color: '#20D8CE',
				  },
				  {
					offset: 1,
					color: '#E5F3F9 ',
				  },
				],
				global: false,
			  },
		  },
	    }
	  ]
	};
	
	if (option && typeof option === 'object') {
	  myChart.setOption(option);
	}
	
	window.addEventListener('resize', myChart.resize);
}

onMounted(() => {
	router.value = getCurrentInstance().appContext.config.globalProperties.$router
	echart.value = getCurrentInstance().appContext.config.globalProperties.$echarts
	lineChart()
	lineChart2()
	barChart()
})
</script>

<template>
	<div class="content">
		<div class="head"></div>
		<div class="block left">
			<div style="height: 609px;" class="son-block">
				<div style="height: 80px;padding-top: 27px;">
					<el-row>
						<el-col :span="8">
							<div class="inclination">
								<div style="width: 117px;height: 60px;">
									<div class="cli-title">设备总数</div>
									<div class="data">999</div>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="inclination">
								<div style="width: 117px;height: 60px;">
									<div class="cli-title">在线</div>
									<div class="data">900</div>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="inclination">
								<div style="width: 117px;height: 60px;">
									<div class="cli-title">离线</div>
									<div class="data">90</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="block-title" style="top: 10px;">
					<div class="title">在线趋势</div>
				</div>
				<div id="chart-container" class="chart-container" style="top: -10px;"></div>
				<div id="chart-container2" class="chart-container" style="top: -65px;"></div>
			</div>
			<div style="height: 308px;" class="son-block">
				<div class="block-title">
					<div class="title">开机时长TOP排名</div>
				</div>
				<div class="progress">
					<el-button type="warning" round size="small" class="ranking" style="top: 101px;">Top1</el-button>
				    <el-progress :text-inside="true" :stroke-width="26" :percentage="90" style="margin-bottom: 45px;z-index: 60;"/>
					<div class="detail" style="top: 130px;">加氨量10000吨</div>
					
					<el-button type="warning" round size="small" class="ranking" style="top: 172px;">Top2</el-button>
				    <el-progress :text-inside="true" :stroke-width="26" :percentage="70" style="margin-bottom: 45px;"/>
					<div class="detail" style="top: 200px;">加氨量8000吨</div>
					
					<el-button type="warning" round size="small" class="ranking" style="top: 243px;">Top3</el-button>
					<el-progress :text-inside="true" :stroke-width="26" :percentage="40" />
					<div class="detail" style="top: 270px;">加氨量6000吨</div>
				  </div>
			</div>
		</div>
		<div class="middle">
			<div class="m-pic"></div>
		</div>
		<div class="block right">
			<div style="height: 297px;" class="son-block">
				<div class="block-title">
					<div class="title">当月累计情况</div>
				</div>
				<div class="month-status">
					<div style="width: 100%;height: 50%;">
						<el-row>
						    <el-col :span="12">
								<div class="status-block">
									<div style="display: flex;">
										<div class="pic p-switch"></div>
										<div class="data-block">
											<div class="m-name">开机次数</div>
											<div class="m-data">9999次</div>
										</div>
									</div>
								</div>
							</el-col>
						    <el-col :span="12">
								<div class="status-block">
									<div style="display: flex;">
										<div class="pic p-time"></div>
										<div class="data-block">
											<div class="m-name">开机时长</div>
											<div class="m-data">999小时</div>
										</div>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
					<div style="width: 100%;height: 50%;">
						<el-row>
						    <el-col :span="12">
								<div class="status-block">
									<div style="display: flex;">
										<div class="pic p-percent"></div>
										<div class="data-block">
											<div class="m-name">在线率</div>
											<div class="m-data">90%</div>
										</div>
									</div>
								</div>
							</el-col>
						    <el-col :span="12">
								<div class="status-block">
									<div style="display: flex;">
										<div class="pic p-statistic"></div>
										<div class="data-block">
											<div class="m-name">设备总数</div>
											<div class="m-data">50台</div>
										</div>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
			<div style="height: 297px;" class="son-block">
				<div class="block-title">
					<div class="title">关机时长趋势</div>
				</div>
				<div id="chart-container3" class="chart-container" style="top: 10px;left: 20px;"></div>
			</div>
			<div style="height: 297px;" class="son-block">
				<div class="block-title">
					<div class="title">离线/关机记录</div>
				</div>
				<div class="table">
					<el-table :data="tableData" stripe="true" style="width: 95%;height: 100%;">
						<el-table-column prop="name" label="设备名称" />
						<el-table-column prop="time" label="时间" width="180" />
						<el-table-column prop="status" label="状态" width="80" />
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.content {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #C7E7FE;
		box-sizing: border-box;
	}
	.head {
		width: 100%;
		height: 105px;
		background-size: 100% 100%;
		background-image: url('../static/head.png');
	}
	.middle {
		position: absolute;
		z-index: 99;
		width: 100%;
		height: 90%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.chart-container {
	  position: relative;
	  height: 280px;
	  overflow: hidden;
	}
	.block {
		z-index: 100;
		position: absolute;
		box-sizing: border-box;
		width: 520px;
		height: 90%;
	}
	.left {
		left: 0px;
		padding-left: 25px;
	}
	.right {
		right: 0px;
		padding-right: 25px;
	}
	.son-block {
		position: relative;
		width: 469px;
		background-color: #E6F4FA;
		border-radius: 23px;
		opacity: 0.9;
		margin: auto;
		margin-bottom: 25px;
	}
	.m-pic {
		width: 1092px;
		height: 813px;
		background-image: url('../static/middle.png');
		background-size: 100% 100%;
	}
	.block-title {
		position: relative;
		height: 35px;
		width: 405px;
		background-image: url('../static/title-bar.png');
		background-size: 100% 100%;
		left: 19px;
		top: 27px;
	}
	.title {
		position: absolute;
		left: 40px;
		top: 5px;
		width: 200px;
		height: 19px;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 18px;
		color: #111E4B;
		font-style: italic;
	}
	.progress .el-progress--line {
	  z-index: 60;
	  position: relative;
	  top: 65px;
	  left: 23px;
	  margin-bottom: 15px;
	  max-width: 400px;
	}
	::v-deep .el-progress-bar__inner {
		background-image: linear-gradient(to right, #58BEEF, #71EAE8);
	}
	.ranking {
		position: absolute;
		left: 23px;
		z-index: 100;
	}
	::v-deep .el-button--warning {
		background-color: #FF8E2E;
	}
	::v-deep .el-table th.el-table__cell {
		background-color: #E6F4FAFF;
	}
	::v-deep .el-table tr {
		background-color: #E6F4FAFF;
	}
	::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
		background-color: #C7E7FEFF;
	}
	.detail {
		position: absolute;
		font-size: 12px;
		right: 50px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111E4B;
	}
	.month-status {
		position: relative;
		top: 25px;
		width: 100%;
		height: 80%;
	}
	.status-block {
		height: 118px;
		display: flex;
		justify-content: center;
		align-items: center;
		.data-block {
			height: 40px;
			margin-top: 25px;
			margin-left: 8px;
		}
	}
	.pic {
		width: 75px;
		height: 77px;
		background-size: 100%;
	}
	.p-switch {
		background-image: url('../static/switch.png');
	}
	.p-time {
		background-image: url('../static/time.png');
	}
	.p-percent {
		background-image: url('../static/percent.png');
	}
	.p-statistic {
		background-image: url('../static/statistic.png');
	}
	.m-name {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 14px;
		color: #2670DB;
		line-height: 11px;
		margin-bottom: 10px;
	}
	.m-data {
		font-family: YouSheBiaoTiHei;
		font-weight: 600;
		font-size: 22px;
		color: #2670DB;
		line-height: 11px;
		width: 85px;
	}
	.inclination {
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		.data {
			width: 100%;
			height: 31px;
			font-family: DIN;
			font-weight: 500;
			font-size: 20px;
			color: #FFFFFF;
			line-height: 31px;
			background-image: linear-gradient(to right, #2ba2f9FF , #7ac4fa03);
			box-sizing: border-box;
			padding-left: 7px;
		}
		.cli-title {
			width: 100%;
			height: 31px;
			color: #2A5998FF;
		}
	}
	.table {
		width: 100%;
		height: 220px;
		position: relative;
		top: 27px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>